<!DOCTYPE html>
<!--
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements.  See the NOTICE file
distributed with this work for additional information
regarding copyright ownership.  The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License.  You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied.  See the License for the
specific language governing permissions and limitations
under the License.
-->


<html>
<head>
    <meta charset="utf-8">
    <script src="lib/esl.js"></script>
    <script src="lib/config.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <link rel="stylesheet" href="lib/reset.css">
</head>
<body>
<style>
</style>
<div id="main"></div>
<script>

    var echarts;
    var chart;
    var myChart;

    require([
        'echarts'
        // 'echarts/chart/scatter',
        // 'echarts/component/legend',
        // 'echarts/component/grid',
        // 'echarts/component/tooltip',
        // 'echarts/component/toolbox',
        // 'echarts/component/markLine',
        // 'echarts/component/markPoint',
        // 'echarts/component/dataZoom',
        // 'echarts/component/visualMap',
        // 'echarts/component/brush'
    ], function (ec) {

        echarts = ec;

        var rawData = [
            [5.1, 3.5, 1.4, 0.2, "setosa"],
            [4.9, 3.0, 1.4, 0.2, "setosa"],
            [4.7, 3.2, 1.3, 0.2, "setosa"],
            [4.6, 3.1, 1.5, 0.2, "setosa"],
            [5.0, 3.6, 1.4, 0.2, "setosa"],
            [5.4, 3.9, 1.7, 0.4, "setosa"],
            [4.6, 3.4, 1.4, 0.3, "setosa"],
            [5.0, 3.4, 1.5, 0.2, "setosa"],
            [4.4, 2.9, 1.4, 0.2, "setosa"],
            [4.9, 3.1, 1.5, 0.1, "setosa"],
            [5.4, 3.7, 1.5, 0.2, "setosa"],
            [4.8, 3.4, 1.6, 0.2, "setosa"],
            [4.8, 3.0, 1.4, 0.1, "setosa"],
            [4.3, 3.0, 1.1, 0.1, "setosa"],
            [5.8, 4.0, 1.2, 0.2, "setosa"],
            [5.7, 4.4, 1.5, 0.4, "setosa"],
            [5.4, 3.9, 1.3, 0.4, "setosa"],
            [5.1, 3.5, 1.4, 0.3, "setosa"],
            [5.7, 3.8, 1.7, 0.3, "setosa"],
            [5.1, 3.8, 1.5, 0.3, "setosa"],
            [5.4, 3.4, 1.7, 0.2, "setosa"],
            [5.1, 3.7, 1.5, 0.4, "setosa"],
            [4.6, 3.6, 1.0, 0.2, "setosa"],
            [5.1, 3.3, 1.7, 0.5, "setosa"],
            [4.8, 3.4, 1.9, 0.2, "setosa"],
            [5.0, 3.0, 1.6, 0.2, "setosa"],
            [5.0, 3.4, 1.6, 0.4, "setosa"],
            [5.2, 3.5, 1.5, 0.2, "setosa"],
            [5.2, 3.4, 1.4, 0.2, "setosa"],
            [4.7, 3.2, 1.6, 0.2, "setosa"],
            [4.8, 3.1, 1.6, 0.2, "setosa"],
            [5.4, 3.4, 1.5, 0.4, "setosa"],
            [5.2, 4.1, 1.5, 0.1, "setosa"],
            [5.5, 4.2, 1.4, 0.2, "setosa"],
            [4.9, 3.1, 1.5, 0.2, "setosa"],
            [5.0, 3.2, 1.2, 0.2, "setosa"],
            [5.5, 3.5, 1.3, 0.2, "setosa"],
            [4.9, 3.6, 1.4, 0.1, "setosa"],
            [4.4, 3.0, 1.3, 0.2, "setosa"],
            [5.1, 3.4, 1.5, 0.2, "setosa"],
            [5.0, 3.5, 1.3, 0.3, "setosa"],
            [4.5, 2.3, 1.3, 0.3, "setosa"],
            [4.4, 3.2, 1.3, 0.2, "setosa"],
            [5.0, 3.5, 1.6, 0.6, "setosa"],
            [5.1, 3.8, 1.9, 0.4, "setosa"],
            [4.8, 3.0, 1.4, 0.3, "setosa"],
            [5.1, 3.8, 1.6, 0.2, "setosa"],
            [4.6, 3.2, 1.4, 0.2, "setosa"],
            [5.3, 3.7, 1.5, 0.2, "setosa"],
            [5.0, 3.3, 1.4, 0.2, "setosa"],
            [7.0, 3.2, 4.7, 1.4, "versicolor"],
            [6.4, 3.2, 4.5, 1.5, "versicolor"],
            [6.9, 3.1, 4.9, 1.5, "versicolor"],
            [5.5, 2.3, 4.0, 1.3, "versicolor"],
            [6.5, 2.8, 4.6, 1.5, "versicolor"],
            [5.7, 2.8, 4.5, 1.3, "versicolor"],
            [6.3, 3.3, 4.7, 1.6, "versicolor"],
            [4.9, 2.4, 3.3, 1.0, "versicolor"],
            [6.6, 2.9, 4.6, 1.3, "versicolor"],
            [5.2, 2.7, 3.9, 1.4, "versicolor"],
            [5.0, 2.0, 3.5, 1.0, "versicolor"],
            [5.9, 3.0, 4.2, 1.5, "versicolor"],
            [6.0, 2.2, 4.0, 1.0, "versicolor"],
            [6.1, 2.9, 4.7, 1.4, "versicolor"],
            [5.6, 2.9, 3.6, 1.3, "versicolor"],
            [6.7, 3.1, 4.4, 1.4, "versicolor"],
            [5.6, 3.0, 4.5, 1.5, "versicolor"],
            [5.8, 2.7, 4.1, 1.0, "versicolor"],
            [6.2, 2.2, 4.5, 1.5, "versicolor"],
            [5.6, 2.5, 3.9, 1.1, "versicolor"],
            [5.9, 3.2, 4.8, 1.8, "versicolor"],
            [6.1, 2.8, 4.0, 1.3, "versicolor"],
            [6.3, 2.5, 4.9, 1.5, "versicolor"],
            [6.1, 2.8, 4.7, 1.2, "versicolor"],
            [6.4, 2.9, 4.3, 1.3, "versicolor"],
            [6.6, 3.0, 4.4, 1.4, "versicolor"],
            [6.8, 2.8, 4.8, 1.4, "versicolor"],
            [6.7, 3.0, 5.0, 1.7, "versicolor"],
            [6.0, 2.9, 4.5, 1.5, "versicolor"],
            [5.7, 2.6, 3.5, 1.0, "versicolor"],
            [5.5, 2.4, 3.8, 1.1, "versicolor"],
            [5.5, 2.4, 3.7, 1.0, "versicolor"],
            [5.8, 2.7, 3.9, 1.2, "versicolor"],
            [6.0, 2.7, 5.1, 1.6, "versicolor"],
            [5.4, 3.0, 4.5, 1.5, "versicolor"],
            [6.0, 3.4, 4.5, 1.6, "versicolor"],
            [6.7, 3.1, 4.7, 1.5, "versicolor"],
            [6.3, 2.3, 4.4, 1.3, "versicolor"],
            [5.6, 3.0, 4.1, 1.3, "versicolor"],
            [5.5, 2.5, 4.0, 1.3, "versicolor"],
            [5.5, 2.6, 4.4, 1.2, "versicolor"],
            [6.1, 3.0, 4.6, 1.4, "versicolor"],
            [5.8, 2.6, 4.0, 1.2, "versicolor"],
            [5.0, 2.3, 3.3, 1.0, "versicolor"],
            [5.6, 2.7, 4.2, 1.3, "versicolor"],
            [5.7, 3.0, 4.2, 1.2, "versicolor"],
            [5.7, 2.9, 4.2, 1.3, "versicolor"],
            [6.2, 2.9, 4.3, 1.3, "versicolor"],
            [5.1, 2.5, 3.0, 1.1, "versicolor"],
            [5.7, 2.8, 4.1, 1.3, "versicolor"],
            [6.3, 3.3, 6.0, 2.5, "virginica"],
            [5.8, 2.7, 5.1, 1.9, "virginica"],
            [7.1, 3.0, 5.9, 2.1, "virginica"],
            [6.3, 2.9, 5.6, 1.8, "virginica"],
            [6.5, 3.0, 5.8, 2.2, "virginica"],
            [7.6, 3.0, 6.6, 2.1, "virginica"],
            [4.9, 2.5, 4.5, 1.7, "virginica"],
            [7.3, 2.9, 6.3, 1.8, "virginica"],
            [6.7, 2.5, 5.8, 1.8, "virginica"],
            [7.2, 3.6, 6.1, 2.5, "virginica"],
            [6.5, 3.2, 5.1, 2.0, "virginica"],
            [6.4, 2.7, 5.3, 1.9, "virginica"],
            [6.8, 3.0, 5.5, 2.1, "virginica"],
            [5.7, 2.5, 5.0, 2.0, "virginica"],
            [5.8, 2.8, 5.1, 2.4, "virginica"],
            [6.4, 3.2, 5.3, 2.3, "virginica"],
            [6.5, 3.0, 5.5, 1.8, "virginica"],
            [7.7, 3.8, 6.7, 2.2, "virginica"],
            [7.7, 2.6, 6.9, 2.3, "virginica"],
            [6.0, 2.2, 5.0, 1.5, "virginica"],
            [6.9, 3.2, 5.7, 2.3, "virginica"],
            [5.6, 2.8, 4.9, 2.0, "virginica"],
            [7.7, 2.8, 6.7, 2.0, "virginica"],
            [6.3, 2.7, 4.9, 1.8, "virginica"],
            [6.7, 3.3, 5.7, 2.1, "virginica"],
            [7.2, 3.2, 6.0, 1.8, "virginica"],
            [6.2, 2.8, 4.8, 1.8, "virginica"],
            [6.1, 3.0, 4.9, 1.8, "virginica"],
            [6.4, 2.8, 5.6, 2.1, "virginica"],
            [7.2, 3.0, 5.8, 1.6, "virginica"],
            [7.4, 2.8, 6.1, 1.9, "virginica"],
            [7.9, 3.8, 6.4, 2.0, "virginica"],
            [6.4, 2.8, 5.6, 2.2, "virginica"],
            [6.3, 2.8, 5.1, 1.5, "virginica"],
            [6.1, 2.6, 5.6, 1.4, "virginica"],
            [7.7, 3.0, 6.1, 2.3, "virginica"],
            [6.3, 3.4, 5.6, 2.4, "virginica"],
            [6.4, 3.1, 5.5, 1.8, "virginica"],
            [6.0, 3.0, 4.8, 1.8, "virginica"],
            [6.9, 3.1, 5.4, 2.1, "virginica"],
            [6.7, 3.1, 5.6, 2.4, "virginica"],
            [6.9, 3.1, 5.1, 2.3, "virginica"],
            [5.8, 2.7, 5.1, 1.9, "virginica"],
            [6.8, 3.2, 5.9, 2.3, "virginica"],
            [6.7, 3.3, 5.7, 2.5, "virginica"],
            [6.7, 3.0, 5.2, 2.3, "virginica"],
            [6.3, 2.5, 5.0, 1.9, "virginica"],
            [6.5, 3.0, 5.2, 2.0, "virginica"],
            [6.2, 3.4, 5.4, 2.3, "virginica"],
            [5.9, 3.0, 5.1, 1.8, "virginica"]
        ];

        var GRID_WIDTH = 220;
        var GRID_HEIGHT = 220;
        var GAP = 20;
        var CATEGORY_DIM = 4;
        var CROSS_DIM_NUMBER = 4;
        var BASE_LEFT = 30;
        var BASE_TOP = 20;
        var SYMBOL_SIZE = 8;

        function genData(data, dimX, dimY) {
            var result = [];
            for (var i = 0; i < data.length; i++) {
                result.push([data[i][dimX], data[i][dimY], data[i][CATEGORY_DIM]]);
            }
            return result;
        }

        function getCategories(data) {
            var map = {};
            var result = [];
            for (var i = 0; i < data.length; i++) {
                if (!map[data[i][CATEGORY_DIM]]) {
                    map[data[i][CATEGORY_DIM]] = 1;
                }
            }
            for (var cate in map) {
                if (map.hasOwnProperty(cate)) {
                    result.push(cate);
                }
            }
            return result;
        }

        function genGrids(option) {
            var gridList = option.grid = [];
            var xAxisList = option.xAxis = [];
            var yAxisList = option.yAxis = [];
            var seriesList = option.series = [];
            var visualMapSeriesIndices = option.visualMap.seriesIndex = [];
            var axisPointerLinkList = option.axisPointer.link = [];
            var axisPointerLinkMap = {};

            for (var i = 0; i < CROSS_DIM_NUMBER; i++) {
                for (var j = 0; j < CROSS_DIM_NUMBER; j++) {
                    var id = i + '-' + j;

                    var linkItem = axisPointerLinkMap['x' + i];
                    if (!linkItem) {
                        linkItem = axisPointerLinkMap['x' + i] = {xAxisId: []};
                        axisPointerLinkList.push(linkItem);
                    }
                    linkItem.xAxisId.push(id);

                    var linkItem = axisPointerLinkMap['y' + j];
                    if (!linkItem) {
                        linkItem = axisPointerLinkMap['y' + j] = {yAxisId: []};
                        axisPointerLinkList.push(linkItem);
                    }
                    linkItem.yAxisId.push(id);

                    gridList.push({
                        left: BASE_LEFT + i * (GRID_WIDTH + GAP),
                        top: BASE_TOP + (CROSS_DIM_NUMBER - 1 - j) * (GRID_HEIGHT + GAP),
                        width: GRID_WIDTH,
                        height: GRID_HEIGHT
                    });
                    xAxisList.push({
                        id: id,
                        axisLine: {
                            onZero: false
                        },
                        axisTick: {
                            show: j === 0
                        },
                        axisLabel: {
                            show: j === 0
                        },
                        type: 'value',
                        gridIndex: i * CROSS_DIM_NUMBER + j,
                        scale: true
                    });
                    yAxisList.push({
                        id: id,
                        axisLine: {
                            onZero: false
                        },
                        axisTick: {
                            show: i === 0
                        },
                        axisLabel: {
                            show: i === 0
                        },
                        type: 'value',
                        gridIndex: i * CROSS_DIM_NUMBER + j,
                        scale: true
                    });
                    seriesList.push({
                        type: 'scatter',
                        symbolSize: SYMBOL_SIZE,
                        xAxisIndex: i * CROSS_DIM_NUMBER + j,
                        yAxisIndex: i * CROSS_DIM_NUMBER + j,
                        data: genData(rawData, i, j)
                    });
                    visualMapSeriesIndices.push(i * CROSS_DIM_NUMBER + j);
                }
            }
        }

        var option = {
            legend: {
                data: ['scatter', 'scatter2', 'scatter3']
            },
            animation: false,
            brush: {
                brushLink: 'all'
            },
            axisPointer: {
                show: true,
                snap: true,
                link: [],
                lineStyle: {
                    type: 'dashed'
                }
            },
            visualMap: {
                type: 'piecewise',
                categories: getCategories(rawData),
                dimension: 2,
                orient: 'horizontal',
                top: 0,
                left: 'center',
                inRange: {
                    color: ['#c23531', '#2f4554', '#61a0a8']
                }
            },
            tooltip: {
                trigger: 'item',
                extraCssText: 'max-width:400px; white-space: normal;',
                formatter: function (params) {
                    if (echarts.util.isArray(params)) {
                        var map = {
                            x: {items: []},
                            y: {items: []}
                        };
                        echarts.util.each(params, function (param) {
                            var dim = param.axisDim;
                            var mapItem = map[dim];
                            mapItem.axisValueLabel = param.axisValueLabel;
                            mapItem.items.push(
                                param.value[dim === 'x' ? 1 : 0]
                                + ' ' + param.value[2]
                            );
                        });
                        return map.x.axisValueLabel + '<br>(' + map.x.items.join(') (') + ')'
                            + '<br><br>'
                            + map.y.axisValueLabel + '<br>(' + map.y.items.join(') (') + ')';
                    } else {
                        return params.name + ' ' + params.value;
                    }
                }
            }
        };

        genGrids(option);

        var mainEl = document.getElementById('main');
        mainEl.style.height = BASE_TOP * 2 + CROSS_DIM_NUMBER * (GRID_HEIGHT + GAP) + 'px';
        chart = myChart = echarts.init(mainEl);
        chart.setOption(option);
    });

</script>
</body>
</html>
